<template>
  <div class="sidebar-container">
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu :default-active="$route.path"
        :collapse="!isCollapse"
        :unique-opened="true"
        mode="vertical"
        background-color="#182B5C"
        text-color="#FFFFFF"
        active-text-color="#399FFB"
        class="el-menu-style">
        <sidebar-item v-for="(menu, index) in menuList" :key="index" :item="menu" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>
<script>
import SidebarItem from './navItem/index'
export default {
  name: 'Sidebar',
  components: { SidebarItem },
  props: {
    menuList: {
      type: Array,
      required: true
    },
    isCollapse: {
      type: Boolean,
      default () {
        return true
      }
    }
  },
  computed: {
    options () {
      return this.$store.state.options
    },
    activeIndex () {
      return this.$store.state.activeIndex
    }
  }
}
</script>
<style scoped>
.el-menu-style:not(.el-menu--collapse) {
    width: 210px;
    min-height: 400px;
    overflow: hidden
  }
.sidebar-container {
  transition: width 0.28s;
  height:calc(100% - 41px );
  font-size: 0px;
  z-index: 1001;
  overflow: hidden;
  background-color:#182B5C;
}
.el-menu {
  border: none
}
.el-menu-style {
  height: 100%;
}
</style>
